<template>
	<view class="view">
		<!-- 个人视频 -->
		<view class="video-box" v-if="dataList && dataList.length>0">
			<view class="videoItem flex_between_center">
				<block v-for="(list,index) in dataList" :key="index">
					<view class="cover"
						style="width: 330rpx; height: 440rpx;  margin-top: 5upx;margin-bottom: 24rpx;position: relative;">
						<view class="status-ing" v-if="list.status==0">
							审核中
						</view>
						<view class="status-faild" v-if="list.status==2">
							审核失败
						</view>
						<u-image width="330rpx" height="440rpx" :src="list.cover?list.cover:list.photo"
							:lazy-load="true" mode="aspectFill" radius="10rpx" @click="towxh5Video(list,index)"
							@longpress.stop="longpress(list)" :showMenuByLongpress="false">
							<template v-slot:loading>
								<u-loading-icon></u-loading-icon>
							</template>
							</u-image>
						<view class="playback flex_start_center" v-if="list.status==1">
							<image class="playbackIcon"
								src="https://file.casugn.com/storecompcard//VfXFFdWH2p73346bb4d55aad4a06dbea38f648d11b6c_1681958946196.png"
								mode="aspectFit">
							</image>
							{{list.play||0}}
						</view>
						<view class="more flex_end_center" @tap="showSheetFunc(list)">
							<image class="moreIcon"
								src="https://file.casugn.com/storecompcard//TUd7p7oWbDr8b4f06d1691d3aa3a890eb223844eb871_1681959143975.png"
								mode="aspectFit">
							</image>
						</view>
					</view>
				</block>
				<u-loadmore :status="status" marginTop="40rpx" loading-text="努力加载中" loadmore-text="上拉加载更多"
					nomore-text="已全部加载" fontSize="30" line v-if="dataList.length>4 && firstLoad" />
			</view>
		</view>
		<view style="min-height: 100vh;" v-else>
			<nodata v-if="firstLoad"></nodata>
		</view>
		<u-action-sheet :actions="actionsList" :show="showSheet" cancelText="取消" :closeOnClickOverlay="true"
			round="16rpx" @select="selectClick" @close="closeSheet"></u-action-sheet>
		<!-- 发布按钮 -->
		<cus-add-btn :safeAreaInsetBottom="false" @click="addVideo"></cus-add-btn>
	</view>
</template>

<script>
	import nodata from "@/pagesCard/components/nodata/nodata.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				dataList: [],
				personVideoList: [],
				lowerThreshold: 0,
				pageNo: 1,
				pageSize: 10,
				friendInfo: {},
				friendCardId: '',
				friendOpenId: '',
				activityIndex: 0,
				showSheet: false,
				actionsList: [{
					name: '编辑',
					color: '#42b983',
					fontSize: '30rpx'
				}, {
					name: '删除',
					color: '#F53F3F',
					fontSize: '30rpx'
				}, ],
				row: {}, //当前选中视频
				openId: '',
				status: 'nomore',
				firstLoad: false

			}
		},
		onPullDownRefresh() {
			this.getVideoList('rest')
		},
		//加载更多
		onReachBottom() {
			this.getVideoList()
		},
		async onShow() {
			let data = uni.getStorageSync('openId')
			this.openId = data.openid
			await this.getVideoList('rest')
		},
		methods: {
			longpress(item) {
				this.showSheetFunc(item)
			},
			closeSheet() {
				this.showSheet = false
			},
			//编辑或删除
			selectClick(e) {
				switch (e.name) {
					case '编辑':
						this.$toPage(`/pagesCard/addVideo/addVideo?info=${JSON.stringify(this.row)}`)
						break;
					case '删除':
						this.delMediaById()
						break;
				}
				this.showSheet = false
			},
			showSheetFunc(item) {
				this.row = item
				this.showSheet = true
			},
			addVideo() {
				this.$toPage( `/pagesCard/addVideo/addVideo`)
			},
			//删除信息
			delMediaById() {
				this.$api.delMediaById(this.row.id).then(res => {
					if (res.success) {
						this.getVideoList('rest')
					} else {
						this.$showToast(res.message)
					}
				})
			},
			towxh5Video(item,index) {
				this.$toPage('/pagesCard/myVideo/myVideoDetail?info='+JSON.stringify(item))
			},
			async getVideoList(rest) {
				this.pageNo = rest ? 1 : ++this.pageNo
				if(this.total === this.dataList.length && !rest) return
				let payload = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					openId: this.openId
				}
				this.status = 'loading'
				let res = await this.$api.getMyVideoLists(payload)
				if (res.success) {
					let arr = res.result.records || []
					this.dataList = rest ? arr : this.dataList.concat(arr)
					this.total = res.result.total
					setTimeout(() => {
						this.status = res.result.total === this.dataList.length ? 'nomore' :
							'loadmore'
							
						this.firstLoad = true
					}, 400)
				} else {
					this.$showToast(res.message)
					this.dataList = []
				}
				uni.hideLoading()

			},

		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #F7F8FA;
	}
</style>


<style lang="scss" scoped>

	.video-box {
		padding: 32rpx;

		.videoItem {
			flex-wrap: wrap;
			position: relative;
			padding-bottom: env(safe-area-inset-bottom);

			.cover {
				transition: transform 0.4s ease-out;

				&:active {
					transform: scale(0.95)
				}
			}

			.playback {
				width: 230rpx;
				height: 68rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				color: #fff;
				font-size: 24rpx;

				.playbackIcon {
					width: 32rpx;
					height: 32rpx;
					margin: 0 6rpx 0 16rpx;
				}
			}

			.more {
				width: 130rpx;
				height: 68rpx;
				padding-right: 16rpx;
				position: absolute;
				bottom: 0;
				right: 0;

				.moreIcon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.status-ing,
		.status-faild {
			padding: 2rpx 10rpx;
			height: 40rpx;
			background: #276AEE;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			text-align: center;
			line-height: 40rpx;
			position: absolute;
			top: 16rpx;
			right: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 10;
		}

		.status-ing {
			background: #276AEE;
		}

		.status-faild {
			background: #F53F3F;
		}
	}
</style>